<template>
  <div class="register-page">
    <Header title="注册" to=""></Header>
	<img class="logo" src="/public/img/login/logo.png" alt="">
	<mu-container>
		<mu-form :label-width="100" ref="form" :model="validateForm" class="mu-register-form" label-position="left">
			<div class="item">
				<mu-form-item label="真实姓名" prop="username" :rules="usernameRules">
					<mu-text-field v-model="validateForm.username" prop="username"></mu-text-field>
				</mu-form-item>
			</div>
			<div class="item">
				<mu-form-item label="手机号" prop="phone" :rules="phoneRules" ref="phone">
					<mu-text-field type="number" v-model="validateForm.phone" prop="phone"></mu-text-field>
				</mu-form-item>
			</div>
			<div class="item">
				<mu-form-item label="验证码" prop="yzm" :rules="yzmRules">
					<mu-text-field v-model="validateForm.yzm" prop="yzm" class="yzm"></mu-text-field>
					<mu-button color="primary" @click="postyzm" :class="{
						disabled: isShow
					}">{{isShow ? (time + 'S') : '获取验证码'}}</mu-button>
				</mu-form-item>
			</div>
			<div class="item">
				<mu-form-item label="账号密码" prop="password" :rules="passwordRules">
					<mu-text-field type="password" v-model="validateForm.password" prop="password"></mu-text-field>
				</mu-form-item>
			</div>
			<div class="item">
				<mu-form-item label="推荐人手机号" prop="pphone" :rules="pphoneRules" help-text="推荐人没有可不填">
					<mu-text-field type="number" v-model="validateForm.pphone" prop="pphone"></mu-text-field>
				</mu-form-item>
			</div>
			<div class="item">
				<mu-form-item prop="isAgree" :rules="argeeRules" class="agree">
					<mu-checkbox label="同意用户协议" v-model="validateForm.isAgree"></mu-checkbox>
					<mu-button flat color="primary" class="look" @click="openFullscreenDialog">阅读查看</mu-button>
					<mu-container>
						<mu-dialog :scrollable="true" :padding="30" width="360" transition="slide-bottom" fullscreen :open.sync="openFullscreen">
							<mu-appbar color="primary" title="夜郎财富用户注册">
								<mu-button slot="left" icon @click="closeFullscreenDialog">
									<mu-icon value="close"></mu-icon>
								</mu-button>
								<mu-button slot="right" style="width: 60px; padding-left: 8px;" flat  @click="closeFullscreenDialog"></mu-button>
							</mu-appbar>
							<div style="padding: 24px;">
								<Text-item></Text-item>
							</div>
							<mu-flex @click="closeDialog" justify-content="center" align-items="center" style="position: fixed; bottom: 0; left: 0; right: 0; margin: 10px; height: 45px;">
								<mu-button full-width color="primary" style="height: 100%; font-size: 16px;">同意并继续</mu-button>
							</mu-flex>
						</mu-dialog>
					</mu-container>
				</mu-form-item>
			</div>
			<div class="item">
				<mu-form-item>
					<mu-button color="primary" @click="submit">提交注册</mu-button>
					<mu-button @click="clear">重置</mu-button>
				</mu-form-item>
			</div>
		</mu-form>
	</mu-container>
	<Alert :toggle="alertStyle.toggle" :colorType="alertStyle.colorType" :iconType="alertStyle.iconType" :content="alertStyle.content"></Alert>
  </div>
</template>
<style lang="scss">
.register-page {
	text-align: center;
    .logo {
        width: 48%;
        margin-top: 3.5rem;
        margin-bottom: 1rem;
    }
	.mu-register-form {
		width: 100%;
		max-width: 540px;
		.mu-form-item {
			margin-bottom: 0;
			.mu-form-item-label {
				text-align: left;
			}
			.mu-form-item-content {
				display: flex;
				justify-content: flex-start;
				align-items: flex-end;
				.yzm {
					width: 43%;
					margin-right: 10%;
				}
				.disabled {
					color: rgba(0,0,0,.3);
					cursor: not-allowed;
					background-color: #e6e6e6;
				}
				.button-wrapper {
					text-align: center;
					.mu-button {
						margin: 8px;
					}
				}
				.mu-checkbox  {
					margin-right: 0;
				}
				.look {
					.mu-button-wrapper {
						padding: 0;
					}
				}
			}
			&.agree {
				.mu-form-item-content {
					display: flex;
					align-items: center;
					.mu-button {
						height: 100%;
						padding-top: 0.5rem;
						margin: 0;
					}
				}
			}
		}
	}
}
</style>
<script>
// 引入头部组件
import Header from '@/components/Header';
// 引入弹框组件
import Alert from '@/components/Alert';
// 引入文本组件
import TextItem from '@/components/TextItem';

// 组件
export default {
	// 注册组件
	components: { Header, Alert, TextItem },
	// 数据
    data () {
        return {
            usernameRules: [
				{ validate: (val) => !!val, message: '必须填写用户名'},
				{ validate: (val) => /^\S{3,}$/.test(val), message: '用户名长度大于3的非空字符'}
            ],
            phoneRules: [
                { validate: (val) => !!val, message: '必须填写手机号'},
				{ validate: (val) => /^1[3456789]\d{9}$/.test(val), message: '手机号格式不正确'}
            ],
            yzmRules: [
                { validate: (val) => !!val, message: '必须填写验证码'},
                { validate: (val) => /^\d{4}$/.test(val), message: '验证码必须为4位数字'}
            ],
            passwordRules: [
                { validate: (val) => !!val, message: '必须填写密码'},
                { validate: (val) => /^\w{4,8}$/.test(val), message: '密码长度为4-8位'}
			],
			pphoneRules: [
				{ validate: (val) => /\w*/.test(val)}
			],
			argeeRules: [{ validate: (val) => !!val, message: '必须同意用户协议'}],
            validateForm: {
				username: '',
				phone: '',
				yzm: '',
				password: '',
				pphone: '',
				isAgree: false				
			},
			// 显示验证码
			isShow: false,
			// 时间
			time: 60,
			// 锁,节流
			lock: false,
			// 初始弹框样式
			alertStyle: {
				// 弹框是否显示
				toggle: false,
				// 弹框颜色
				colorType: 'success',
				// 弹框左侧图标样式
				iconType: 'success',
				// 弹框文本内容
				content: ''
			},
			// 弹框关闭时间
			alertTime: 2000,
			// 延时器句柄
			timer: null,
			// 是否显示详情
			openFullscreen: false
        }
	},
	// 方法
	methods: {
		// 阅读查看详情开启操作
		openFullscreenDialog () {
			// 开启详情
      		this.openFullscreen = true;
		},
		// 阅读查看详情开启操作
		closeFullscreenDialog () {
			// 关闭详情
			this.openFullscreen = false;
		},
		// 提交注册
		submit () {
			this.$refs.form.validate().then((result) => {
				// console.log(result);
				// 如果校验成功
				if (result) {
					// 发送请求,校验验证码
					this.$http({
						url: '/api/code/validate',
						method: 'POST',
						data: {
							phone: this.validateForm.phone,
							yzm: this.validateForm.yzm
						}
					})
					// 监听数据返回
					.then(({ data }) => {
						// console.log(data);
						// 验证码校验成功
						if (data.code === 0) {
							// 解构表单数据
							let { isAgree, ...args } = this.validateForm;
							// console.log(args);
							// 提交注册信息
							this.$http({
								url: '/api/user/register',
								method: 'POST',
								// headers: {},
								data: {
									...args,
									sex: '男'
								}
							})
							// 监听数据返回
							.then(({ data }) => {
								// console.log(data);
								// 设置成功弹框样式
								this.alertStyle = {
									toggle: true,
									colorType: 'success',
									iconType: 'check_circle',
									content: data.msg
								}
								// 关闭弹框
								this.closeTips();
								// 弹框关闭跳转页面
								setTimeout(() => {
									// 跳转登录页
									this.$router.replace('/login');
								}, this.alertTime);
							})
						// 校验失败
						} else {
							// 提示信息
							// 设置失败弹框样式
							this.alertStyle = {
								toggle: true,
								colorType: 'error',
								iconType: 'warning',
								content: data.msg
							}
							// 关闭弹框
							this.closeTips();
						}
					})
				}
			});
		},
		clear () {
			this.$refs.form.clear();
			// this.validateForm = {
			// 	username: '',
			// 	phone: '',
			// 	yzm: '',
			// 	password: '',
			// 	pphone: '',
			// 	isAgree: false		
			// };
			for (let key in this.validateForm) {
				this.validateForm[key] = '';
			}
			// 将阅读协议改为false
			this.validateForm.isAgree = false;
		},
		// 3s后关闭提示框
		closeTips() {
			// 清除上一次的延时器
			clearTimeout(this.timer);
			// 延时器			
			this.timer = setTimeout(() => {
				// 弹框隐藏
				this.$set(this.alertStyle, 'toggle', false);
			}, this.alertTime)
		},
		// 短信验证码
		postyzm() {
			// 校验手机号是否符合
			if (this.$refs.phone.validate()) {
				// 显示倒计时
				this.isShow = true;
				// 节流
				if(this.lock) {
					return;
				}
				// 上锁
				this.lock = true;
				// console.log(this.validateForm.phone)
				// 发送请求
				this.$http({
					url: '/api/code/sendCode',
					method: 'POST',
					data: {
						phone: this.validateForm.phone,
						type: 1
					}
				})
				// 监听数据返回
				.then(({ data }) => {
					// console.log(data);
					// 如果成功
					if (data.code === 0) {
						// 设置成功弹框样式
						this.alertStyle = {
							toggle: true,
							colorType: 'success',
							iconType: 'check_circle',
							content: data.msg
						}
						// 关闭弹框
						this.closeTips();
					// 失败
					} else {
						// 提示信息
						// 设置失败弹框样式
						this.alertStyle = {
							toggle: true,
							colorType: 'error',
							iconType: 'warning',
							content: data.msg
						}
						// 关闭弹框
						this.closeTips();
					}
				})
				// 定时器
				let timer = setInterval(() => {
					// 倒计时
					this.time--;
					// 判断边界
					if(this.time <= 0) {
						// 清除定时器
						clearInterval(timer);
						// 还原时间
						this.time = 60;
						// 显示获取验证码
						this.isShow = false;
						// 开锁
						this.lock = false;
					}
				}, 1000)

			} else {
				// 节流
				if(this.lock) {
					return;
				}
				// 设置失败弹框样式
				this.alertStyle = {
					toggle: true,
					colorType: 'error',
					iconType: 'warning',
					content: '请正确输入手机号'
				}
				// 关闭弹框
				this.closeTips();
			}
		},
		// 关闭阅读查看弹框的方法
		closeDialog() {
			// 关闭阅读查看弹框
			this.openFullscreen = false;
			// 将同意用户协议选中
			this.$set(this.validateForm, 'isAgree', true);
		}
	}
};
</script>